<script setup>
</script>

<template>
  <div style="display: flex;justify-content: center;" ref="scrollContainer">
    <div class="container">
      <img src="@/assets/word4.jpg" class="word-bg">
      <div class="word">
        大家好，我是肆方<br>
        紧赶慢赶，SMC维基总算是和大家见面了。说来惭愧，理应半年前就该端出来了，但由于技术未完全掌握以及自身拖延等原因才延期至今。<br>
        《机动都市阿尔法》算是我玩的比较久的手游了，也是我开始发布视频的契机。早在国服还没出时就已经在国际服体验，
        在满月之战联动期间，还从当时的官方手中拿下奖励（那时官号还叫栗子酱来着）。
        这么久过去了，中间也有多次退坑回坑，但幸运的是总能有小伙伴一起唠嗑一起玩。<br>
        回到这个维基上来，说实话叫维基纯粹是我不知道该怎么称呼，毕竟这个网站能提供的信息很少，没有攻略没有教程，
        只有机甲和驾驶员的数据信息。我相信很多人会觉得与其查看这个维基，不如直接登录游戏看得更方便，但正如我之前所说，
        《机动都市阿尔法》对我来说是有意义的，所有我想我应该去做点什么来给自己一个交代，当然也希望这个维基哪怕能有一丝帮助到其他人，对我而言就足够了。当然后期会继续优化也说不准<br>
        《机动都市阿尔法》这款游戏，独特性在于机动，重点则在都市，玩家与玩家间的联系构筑成了机动都市，
        游戏里有可以合作的队友，游戏外有可以唠嗑的好友，这正是游戏的最高配置。<br>
        也许今后游戏会关服，好友会退坑，但那些回忆永存。<br>
        Don't cry because it is over, smile because it happened.
      </div>
    </div>

  </div>

  <img src="@/assets/image5.jpg" class="image" />
 

</template>

<style scoped lang="scss">
.container {
  // position: absolute;
  position: relative;
  width: 1000px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  .word-bg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* 确保图片按比例缩放，并且完全显示在容器内 */

  }

  .word {
    margin-left: 20px;
    position: absolute;
    top: 18%;
    left: 15%;
    transform: translate(-10%, -15%);
    color: #000;
    font-size: 24px;
    font-family: 'Pacifico', cursive;
    /* 使用手写体字体 */
    font-weight: bold;
    // background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 5px;
  }

}


.image {
  max-width: 100%;
}
</style>